<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        X-admin v1.0
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" type="text/css">
    <link rel="stylesheet" href="../../static/plugin/layer/skin/layer.css" type="text/css">
    <link rel="stylesheet" href="../../static/css/x-admin.css" media="all">
    <link rel="stylesheet" href="list.css" type="text/css">
</head>
<body>
<div class="x-body" id="roleApp">

    <xblock><button class="layui-btn but-green" @click="addRole">添加</button></xblock>

    <table>
        <thead>
        <tr>
            <th class="por" @click="allChose" style="width:40px;">
                <input class="checkbox allChose" :checked="allChoseFlag"  type="checkbox" name="like1[write]" lay-filter="allChoose" :value="'all'" v-model="delMultiFlag">
                <i class="layui-icon" :class="{'checkedColor':allChoseFlag}">&#xe618;</i>
            </th>
            <th>角色名称</th>
            <th>角色描述</th>
            <th width="300px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in roleLists">
            <td  class="por w40" @click="selectSelf(item)">
                <input class="checkbox"  :value="item.id" type="checkbox" name="" :checked="item.checked"  v-model="delMultiFlag">
                <i class="layui-icon"  :class="{'checkedColor':item.checked}">&#xe618;</i>
            </td>
            <td  style="cursor:pointer;" v-text="item.roleName"></td>
            <td  style="cursor:pointer;" v-text="item.roleDescription"></td>
            <td>
                <div class="layui-btn-group flexBox">
                    <button class="layui-btn "  @click="editDept(item)">编辑</button>
                    <button class="layui-btn but-orange"  @click="delRole(item)">删除</button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <div id="page" class="fl"></div>
    <div class="layui-laypage-curr pageHideFlag" style="text-align: center;line-height: 30px;height:30px;margin-top:10px;font-size: 0;float:left;">
        <span class="layui-laypage-next" style="display: inline-block;height:28px;font-size: 12px;color:#333;border:1px solid #e2e2e2;padding:0 10px;">
            共 {{totalNum}} 条数据
        </span>
    </div>
    <div class="layui-laypage-curr pageShowFlag" style="display: none;text-align: center;line-height: 30px;height:30px;margin-top:10px;font-size: 0;float:left;">

        <span class="layui-laypage-curr" style="display: inline-block;width:38px;height:30px;background: #5eabed;border:1px solid #5eabed;">
            <em style="font-style: normal;font-size: 12px;color:#fff;">1</em>
        </span>
        <span class="layui-laypage-next" style="display: inline-block;height:30px;font-size: 12px;color:#333;border:1px solid #e2e2e2;padding:0 10px;">
            共 {{totalNum}} 条数据
        </span>
    </div>
</div>
<script src="../../static/lib/jquery.min.js"></script>
<script src="../../static/lib/layui/layui.js" charset="utf-8"></script>
<script src="../../static/lib/vue.min.js"></script>
<script src="../../static/lib/x-layui.js"></script>
<script src="list.js"></script>

</body>
</html>